<template>
  <div class="product">
    <PageContainer headerType="icon">
      <div class="container-wrapper">
        <SearchModule @search="onSearch"></SearchModule>
        <div class="type-list">
          <TypeList :options="typeList" @change="onTypeChange"></TypeList>
        </div>
        <div id="product-main-container" class="main-container">
          <div v-if="containerHeight" class="left-module">
            <SideBar
              v-if="containerHeight"
              :height="containerHeight"
              :tabList="tabBarList"
              @change="onSideChange"
            ></SideBar>
          </div>
          <div v-if="containerHeight" class="right-module">
            <ProduceList
              v-if="containerHeight"
              listApi="/api/erp/erpCategoryRelate/list"
              :extParams="{
                categoryId: currentSide.id,
                name: searchText,
              }"
              :height="containerHeight"
            >
              <template #header>
                <div v-if="currentSide.url" class="header-wrapper">
                  <!-- <img
                    v-if="currentSide.url"
                    class="img"
                    :src="currentSide.url"
                    alt=""
                  /> -->
                  <image
                    class="img"
                    mode="aspectFill"
                    :src="currentSide.url"
                  ></image>
                </div>
              </template>
            </ProduceList>
          </div>
        </div>
      </div>
    </PageContainer>
    <TabBar></TabBar>
  </div>
</template>

<script setup lang="ts">
import {ref, getCurrentInstance, onMounted} from 'vue';
import TabBar from '@/components/TabBar/index.vue';
import PageContainer from '@/components/PageContainer/index.vue';
import SideBar from './components/SideBar.vue';
import ProduceList from '@/components/ProductList/index.vue';
import SearchModule from '@/components/SearchModule/index.vue';
import TypeList from '@/components/TypeList/index.vue';
import {getTreeTypeList, getSingleTypeList} from '@/api/type';
import {useRouter} from '@/hooks/useRouter';

const {push} = useRouter();
const route = getCurrentPages();

const typeList = ref([]);

const containerHeight = ref(0);
let instance = getCurrentInstance();
const initHeight = () => {
  const query = uni.createSelectorQuery().in(instance?.proxy);
  setTimeout(() => {
    query
      .select(`#product-main-container`)
      .boundingClientRect((result: any) => {
        if (result?.height) {
          containerHeight.value = result.height;
        } else {
          console.log('error', '-> ', instance);
        }
      })
      .exec();
  }, 100);
};

const onShareAppMessage = () => {
  return {
    title: '融华荟礼服定制',
    path: route[route.length - 1].route,
  };
};

onMounted(async () => {
  const data: any = await getTreeTypeList('0');
  typeList.value = data.records.map((item: any) => {
    return {
      ...item,
      label: item.name,
      value: item.id,
      icon: item.url,
    };
  });
  initHeight();
});
const onTypeChange = (data: any) => {
  push({
    path: '/pages/typePage/index',
    query: {
      id: data.id,
    },
  });
};

const tabBarList = ref([]);
// 单层分类
const currentSide: any = ref({});
onMounted(async () => {
  const data: any = await getSingleTypeList();
  tabBarList.value = data.records.map((item: any) => {
    return {
      ...item,
      label: item.name,
      value: item.id,
      icon: item.url,
    };
  });
});
// 搜索
const searchText = ref('');
const onSearch = (data: string) => {
  searchText.value = data;
};
const onSideChange = (data: any) => {
  currentSide.value = data;
  searchText.value = '';
};
</script>

<style lang="less" scoped>
.product {
  .container-wrapper {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .search-module {
      padding: 0 24px;
    }
    .type-list {
      width: 100%;
      .list {
        width: 100%;
      }
    }
    .main-container {
      flex: 1;
      display: flex;
      .left-module {
        width: 100px;
        height: 100%;
        flex: 0 0 100px;
      }
      .right-module {
        flex: 1;
        height: 100%;
        box-sizing: border-box;
      }
    }
    .header-wrapper {
      width: 97%;
      margin: auto;
      position: relative;
      padding-bottom: 110%;
      overflow: hidden;
      .img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        margin: auto;
      }
    }
  }
}
</style>
